<script setup>
const props = defineProps({
  showDialog: Boolean,
  headerLsit: Array,
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
const { showDialog, headerLsit } = toRefs(props);
const tableData = ref({});
const tableList = ref([]);
const tableRefs = ref();

const openDialog = () => {
  let obj = {};

  headerLsit.value.forEach((item) => {
    obj[item.key] = "";
  });

 

  tableData.value = JSON.parse(JSON.stringify(obj));
  if (!tableList.value.length) {
    tableList.value.push(JSON.parse(JSON.stringify(obj)));
  }
};

const keyList = computed(()=>{
    return headerLsit.value.map(item=> item.key)
  })
const addListItem = (idx) => {
  tableList.value.splice(idx + 1, 0, JSON.parse(JSON.stringify(tableData.value)));
  refreshTable();
};
const dleTableData = (idx) => {
  if (tableList.value.length <= 1) {
    ElMessage.warning("请至少保留一条数据");
    return;
  }

  ElMessageBox.confirm(`确认删除当前行？`, "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    tableList.value.splice(idx, 1);
    refreshTable();
  });
};


const refreshTable = () => {
  tableRefs.value.search();
};
// const headerLsit = ref([
//   { label: "表头1", showInput: false },
//   { label: "表头2", showInput: false },
// ]);
// 增加列
// const addColumn = ()=>{
//   headerLsit.value.push({ label: "表头N", showInput: false },)
// }
// 显示表头输入框
// const showInput = (idx, refs) => {
//

//   headerLsit.value[idx].showInput = true;
//   refs.InputRefs[idx].focus()
//   // nextTick(()=>{
//   //
//   //   InputRef.value.focus()
//   // })
// };
// // 关闭表头输入框
// const handleInputConfirm = (idx) => {
//   headerLsit.value[idx].showInput = false;
// };
// 删除列
// const handleClose = (item,idx)=>{
//   ElMessageBox.confirm(`确认删除“${item.label}”整列？`, "删除提示", {
//     confirmButtonText: "确认",
//     cancelButtonText: "取消",
//     type: "warning",
//   }).then(async () => {
//     headerLsit.value.splice(idx, 1);
//   });
// }
const onSubmit = () => {
  emits("confirm", "showTableList", tableList.value);
};
const onClose = () => {
  emits("cancel", "showTableList");
};
const emits = defineEmits(["cancel", "confirm"]);
</script>
<template>
  <Dialog
    :model-value="showDialog"
    title="设置表格"
    :width="1000"
    @confirm="onSubmit"
    @close="onClose"
    @open="openDialog"
  >
    <LayoutTable
      ref="tableRefs"
      :no-page="true"
      :show-pager="false"
      :data-list="tableList"
    >
      <el-table-column
        v-for="(item, idx) in headerLsit"
        :key="idx"
        align="center"
        min-width="100"
      >
        <template #header>
          {{ item.label }}
        </template>
        <template #default="scope">
          <el-input v-model="scope.row[keyList[idx]]" size="small" placeholder="请输入" />
        </template>
      </el-table-column>
      <el-table-column prop="insName" align="center" label="操作" width="200">
        <!-- <template #header>
          <el-button type="primary" @click="addColumn()"
            >添加一列</el-button
          >
        </template> -->
        <template #default="scope">
          <el-button size="small" type="primary" @click="addListItem(scope.$index)"
            >添加一行</el-button
          >
          <el-button size="small" type="danger" @click="dleTableData(scope.$index)"
            >删除本行</el-button
          >
        </template>
      </el-table-column>
    </LayoutTable>
  </Dialog>
</template>

<style lang="scss" scoped>
._select-box {
  display: block;
  align-items: center;
}
._item_text {
  display: flex;
  margin-bottom: 5px;
  align-items: center;
  span {
    display: inline-block;
    background: #ddd;
    line-height: 20px;
    width: 200px;
    text-align: center;
  }
  .el-icon {
    margin-left: 5px;
    cursor: pointer;
  }
}
</style>
